<template>
  <div>
    <n-spin :show="data.loading">
      <div class="h-60 text-14 color-#3A3E45 font-bold line-height-60">
        记录内容共{{ data.itemCount }}条记录
      </div>
      <!-- <n-scrollbar style="height: 300px"> -->
      <div v-if="data.list.length" class="record-list">
        <div v-for="(item, index) in data.list" :key="index" class="record-item">
          <div class="record-left">
            <img class="record-avatar" :src="item[keys.avatar] || defaultUser" />
            <div v-if="index !== data.list.length - 1" class="record-line"></div>
          </div>
          <div class="record-right">
            <div class="record-text">{{ item[keys.text] }}</div>
            <div class="record-time">
              <div>{{ $format(item[keys.createTime]) }} 创建</div>
              <div>{{ $format(item[keys.updateTime]) }} 更新</div>
            </div>
            <FileList v-model="item[keys.files]" :show-remove="false" />
            <n-tooltip
              v-if="
                (hasPermission(editPermissionKey) || hasPermission(delPermissionKey)) &&
                (item.createUser === userStore.userId || userStore.isHigh)
              "
              trigger="hover"
            >
              <template #trigger>
                <n-icon
                  :size="16"
                  :component="MdMore"
                  class="color-0A56D8 absolute right-16 top-16 rounded-4 bg-#F4F5F7"
                  color="#0A56D8"
                ></n-icon>
              </template>
              <n-button
                v-permission="editPermissionKey"
                text
                color="#FFF"
                @click="emits('edit', item)"
              >
                修改
              </n-button>
              <br />
              <n-button
                v-permission="delPermissionKey"
                text
                color="#FFF"
                @click="emits('delete', item)"
              >
                删除
              </n-button>
            </n-tooltip>
          </div>
        </div>
      </div>
      <n-empty
        v-if="!data.list.length && !data.loading"
        description="暂无更多记录！"
        size="large"
        style="margin-top: 100px"
      ></n-empty>
      <!-- </n-scrollbar> -->
    </n-spin>
    <n-pagination
      :page="data.page"
      :page-size="data.pageSize"
      :item-count="data.itemCount"
      show-quick-jumper
      show-size-picker
      :page-sizes="data.pageSizes"
      :suffix="data.suffix"
      @update:page="methods.onUpdatePage"
      @update:page-size="methods.onUpdatePageSize"
    />
  </div>
</template>
<script setup lang="jsx">
import { useUserStore } from '@/store'
import { usePermissionStore } from '@/store'
import { MdMore } from '@vicons/ionicons4'
import FileList from '@/components/file/FileList.vue'
import defaultUser from '@/assets/default-user.png'
defineOptions({ name: 'RecordList' })
const props = defineProps({
  getData: {
    type: Function,
    default: () => {},
  },
  keys: {
    type: Object,
    default: () => ({
      avatar: 'createUserAvatar',
      text: 'content',
      createTime: 'createTime',
      updateTime: 'updateTime',
      files: 'refFileDtoList',
    }),
  },
  editPermissionKey: {
    type: String,
    default: '',
  },
  delPermissionKey: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['delete', 'edit'])
const { hasPermission } = usePermissionStore()
const userStore = useUserStore()
const data = reactive({
  list: [],
  loading: false,
  page: 1,
  pageSize: 10,
  itemCount: 0,
  pageSizes: [10, 20, 30, 40],
  suffix: () => '页',
})
const methods = reactive({
  onUpdatePage(page) {
    data.page = page
    methods.handleQuery()
  },
  onUpdatePageSize(pageSize) {
    data.pageSize = pageSize
    methods.handleQuery()
  },
  async handleQuery() {
    try {
      data.loading = true
      const res = await props.getData({ page: data.page, limit: data.pageSize })
      data.list = res.data?.records || res.data
      data.itemCount = Number(res.data.total ?? res.data.length)
    } catch (error) {
      data.list = []
      data.itemCount = 0
    } finally {
      data.loading = false
    }
  },
  handleSearch() {
    data.page = 1
    methods.handleQuery()
  },
})
onBeforeMount(() => {
  methods.handleQuery()
})
defineExpose({
  handleSearch: methods.handleSearch,
  handleQuery: methods.handleQuery,
})
</script>
<style lang="scss" scoped>
.record-list {
  display: flex;
  gap: 16px;
  flex-direction: column;
  margin-right: 20px;
  margin-bottom: 20px;
  .record-item {
    display: flex;
    gap: 16px;
    .record-left {
      display: flex;
      gap: 16px;
      flex-direction: column;
      align-items: center;
      width: 40px;
      flex-shrink: 0;
      .record-avatar {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        object-fit: cover;
        flex-shrink: 0;
      }
      .record-line {
        flex: 1;
        width: 2px;
        background: #e7eaf0;
      }
    }
    .record-right {
      flex: 1;
      border-radius: 8px;
      border: 2px solid #e7eaf0;
      min-height: 100px;
      box-sizing: border-box;
      padding: 16px 280px 16px 16px;
      position: relative;
      .record-text {
        font-size: 14px;
        font-weight: 400;
        color: #3a3e45;
        line-height: 22px;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
      }
      .record-time {
        display: flex;
        gap: 20px;
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        color: #686f7c;
      }
    }
  }
}
</style>
